<template>
  <view
    v-if="width"
    :style="'width:' + width + ';' + (square ? 'height:' + width : '')"
    class="uni-grid-item"
  >
    <view
      :class="{
        'uni-grid-item--border': showBorder,
        'uni-grid-item--border-top': showBorder && index < column,
        'uni-highlight': highlight,
      }"
      :style="{
        'border-right-color': borderColor,
        'border-bottom-color': borderColor,
        'border-top-color': borderColor,
      }"
      class="uni-grid-item__box"
      @click="_onClick"
    >
      <slot />
    </view>
  </view>
</template>

<script>
/**
 * GridItem 宫格
 * @description 宫格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
 * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
 */
export default {
  name: 'UniGridItem',
  inject: ['grid'],
  props: {
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      column: 0,
      showBorder: true,
      square: true,
      highlight: true,
      left: 0,
      top: 0,
      openNum: 2,
      width: 0,
      borderColor: '#e5e5e5',
    }
  },
  created() {
    this.column = this.grid.column
    this.showBorder = this.grid.showBorder
    this.square = this.grid.square
    this.highlight = this.grid.highlight
    this.top = this.hor === 0 ? this.grid.hor : this.hor
    this.left = this.ver === 0 ? this.grid.ver : this.ver
    this.borderColor = this.grid.borderColor
    this.grid.children.push(this)
    // this.grid.init()
    this.width = this.grid.width
  },
  beforeUnmount() {
    this.grid.children.forEach((item, index) => {
      if (item === this) {
        this.grid.children.splice(index, 1)
      }
    })
  },
  methods: {
    _onClick() {
      this.grid.change({
        detail: {
          index: this.index,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.uni-grid-item {
  /* #ifndef APP-NVUE */
  height: 100%;
  display: flex;
  /* #endif */
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

.uni-grid-item__box {
  /* #ifndef APP-NVUE */
  display: flex;
  width: 100%;
  /* #endif */
  position: relative;
  flex: 1;
  flex-direction: column;
  // justify-content: center;
  // align-items: center;
}

.uni-grid-item--border {
  position: relative;
  /* #ifdef APP-NVUE */
  border-bottom-color: #d2d2d2;
  border-bottom-style: solid;
  border-bottom-width: 0.5px;
  border-right-color: #d2d2d2;
  border-right-style: solid;
  border-right-width: 0.5px;
  /* #endif */
  /* #ifndef APP-NVUE */
  z-index: 0;
  border-bottom: 1px #d2d2d2 solid;
  border-right: 1px #d2d2d2 solid;
  /* #endif */
}
.uni-grid-item--border-top {
  position: relative;
  /* #ifdef APP-NVUE */
  border-top-color: #d2d2d2;
  border-top-style: solid;
  border-top-width: 0.5px;
  /* #endif */
  /* #ifndef APP-NVUE */
  border-top: 1px #d2d2d2 solid;
  z-index: 0;
  /* #endif */
}

.uni-highlight:active {
  background-color: #f1f1f1;
}
</style>
